<template>
  <div>
    <el-table :data="shopList" style="width: 100%">
      <el-table-column prop="name" label="店铺" width="250">
        <template slot-scope="scope">
          <el-avatar :size="50" :src="scope.row.avatar" shape="square" />
          <span style="width: 120px">{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="绑定手机号" width="120" />

      <el-table-column prop="details" label="地址" width="180" />
      <el-table-column prop="selesman" label="业务员" width="" />
      <el-table-column prop="employee" label="店员" width="">
        <template slot-scope="scope">
          <span class="t-center" @click="storesClick(scope, shopTitle, scope.row.id)">{{ scope.row.employee }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="commodity_count" label="现有商品(种)" width="120">
        <template slot-scope="scope">
          <span class="t-center" @click="storesClick(scope, goodsTitle, scope.row.id)">{{ scope.row.commodity_count }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="sales" label="总销售额" width="100" sortable>
        <template slot-scope="scope">
          <span class="t-center" @click="storesClick(scope, saleTitle, scope.row.id)">{{ scope.row.sales }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="offline_earnings" label="总收益" width="100" sortable>
        <template slot-scope="scope">
          <span @click="storesClick(scope, revenueTitle, scope.row.id)">{{ scope.row.offline_earnings }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" width="" />
      <el-table-column prop="created_at" label="注册时间" width="200" />
    </el-table>
  </div>
</template>
<script>

export default {
  props: {
    shopList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      goodsTitle: '现有商品',
      shopTitle: '店员',
      saleTitle: '总销售额',
      revenueTitle: '总收益'
    }
  },
  methods: {
    storesClick(name, title, id) {
      this.$emit('storesClick', name, title, id)
    },
    handleEdit() {
    },
    handleDelete() {
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
@import '@/styles/el-table.scss';
.el-table /deep/ .cell {
  .edit {
    color: #409eff;
    margin-right: 24px;
    cursor: pointer;
    white-space: nowrap;
  }
  .delete {
    color: #f56c6c;
    cursor: pointer;
    white-space: nowrap;
  }
}
.el-table /deep/ .cell{
  &:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .el-avatar{
    margin-right: 15px;
  }
}
.el-table /deep/ .el-table__row td {
  &:nth-child(5), &:nth-child(6),&:nth-child(7), &:nth-child(8) {
    color: #409eff;
    cursor: pointer;
    span{
      // width: 50px;
    }
  }
}
.t-center{
  text-align: center;
}
</style>

